<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>童趣玩具店</title>
    <!-- 引入ElementUI的样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        /*
            设置body样式

        */
        body{
            margin: 0px;/*设置上下左右空白距离为0*/
        }
        /*
            设置index-container  div样式
        */
        .index-container{
            margin: 0 auto;/*设置div居中*/
            width: 85%;/*设置宽度,使用百分比设置*/
            min-width: 1024px;/*设置最小宽度*/
        }



        /*
            ElementUI提供的样式
            设置el-header，el-footer两个标签的样式

        */
        .el-header, .el-footer {
            background-color: #606266;
            color: #333;
            line-height: 60px;
        }

        .el-header{
            background-color: lightblue;
            display: flex;
        }

        .el-footer{
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            font-family: 宋体;
            letter-spacing: 3px;
            color: white;

        }

        .el-header .logo{
            border: 0px solid red;
            width: 50%;
            height: 100%;
            padding-left: 50px;
        }

        .logo span{
            margin-top:-30px;
            position: relative;
            top:-17px;
            display: inline-block;
            border: 0px solid red;
            height: 100%;
            line-height: 60px;
            font-size: 30px;
            font-weight: bold;
        }

        .el-header .user_info{
            border: 0px solid blue;
            width: 50%;
            height: 100%;
            text-align: right;
            padding-right: 30px;
        }
        /**
          ElementUI提供的样式
          设置el-main样式
         */
        .el-main {
            /*background-color: #E9EEF3;*/
            color: #333;
        }






        a:link{
            text-decoration: none;
            color: dodgerblue;
            font-weight: bold;
        }
        a:visited{
            text-decoration: none;
            color: dodgerblue;
            font-weight: bold;
        }
        a:hover{
            color: red;
            font-weight: bold;
        }







    </style>

</head>
<body>
<div id="index-container" class="index-container">

    <el-container>
        <el-header>
            <div class="logo">
                <a href="/toyshopping">
                    <img src="/toyshopping/images/logo.png" style="height:60px ">
                </a>
                <span>童趣玩具店</span>
            </div>
            <div class="user_info" >
                <!--
                    v-if:vue的if指令
                    当v-if为true时显示当前标签，为false不显示当前标签
                -->
                <div class="user_operate" v-if="curUser==null">
                    <a href="register.html">用户注册</a>
                    <a href="login.html">用户登录</a>
                </div>

                <div class="user_info_div" v-if="curUser!=null">
                        <span style="margin-right:10px">
                            <label style="color: red">欢迎您:</label>
                            <label style="color: blue">{{curUser.user_name}}</label>
                        </span>

                    <el-button type="danger" plain size="mini" @click="exit">退出</el-button>
                </div>

            </div>
        </el-header>
        <!--商品信息展示区-->
        <el-main>
            <div style="margin-bottom: 20px">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>
                        <a href="/toyshopping">首页</a>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>购物车</el-breadcrumb-item>

                </el-breadcrumb>
            </div>

            <el-table
                    :data="carList"
                    border
                    style="width: 100%"
                    align="center"
                    ref="carTable"
                    @selection-change="selectionChangeHandler">

                <el-table-column
                        type="selection"
                        width="55"
                        align="center">
                </el-table-column>

                <el-table-column
                        type="index"
                        label="序号"
                        width="180"
                        align="center">
                </el-table-column>

                <el-table-column
                        prop="toy_name"
                        label="商品名称"
                        width="180"
                        align="center">
                </el-table-column>

                <el-table-column
                        prop="toy_image"
                        label="商品图片"
                        align="center">
                    <template slot-scope="scope">
                        <img :src="'/toyshopping/images/toys/'+scope.row.toy_image" width="100%" height="100%"/>
                    </template>
                </el-table-column>


                <el-table-column
                        prop="toy_price"
                        label="单价"
                        align="center">
                </el-table-column>


                <el-table-column
                        prop="car_count"
                        label="购买数量"
                        align="center">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.car_count" :min="1" @change="updateCarCount(scope.row.car_id,scope.row.car_count)"></el-input-number>

                    </template>
                </el-table-column>

                <el-table-column
                        prop="total"
                        label="合计"
                        align="center">
                </el-table-column>

                <el-table-column
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                        <el-button type="danger" size="mini" icon="el-icon-delete" @click="delCar(scope.row.car_id)">删除</el-button>
                    </template>

                </el-table-column>

            </el-table>
            <div style="text-align: right;margin: 10px">
                <label style="font-size: 26px;font-weight: bold">总价:</label>
                <label style="font-size: 26px;font-weight: bold;color: red;margin-right: 10px">¥{{sum}}</label>
                <el-button type="warning" @click="confrimPay">购买选中的商品</el-button>
            </div>




        </el-main>
        <el-footer>童趣玩具店所有</el-footer>
    </el-container>

</div>

<script src="/toyshopping/js/vue.min.js"></script>
<script src="/toyshopping/js/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="/toyshopping/js/sweetalert2.js"></script>
<script src="/toyshopping/js/qs.js"></script>
<script>
    /**
     * 创建Vue对象，并对vue进行配置
     * 在vue的构造器中配置
     */
    new Vue({
        //用于配置vue要渲染的元素,在el指定的元素中vue可以起作用,脱离指定元素，vue无效,vue的渲染元素可以为任意元素，一般是div
        el:'#index-container',
        data(){//vue的数据区，等同于java类中的属性
            return{
                curUser:null,//当前登录者对象
                carList:[],
                sum:0,//选择商品的总价格
                car_ids:[],//当前选中购物车中商品的购物车编号
                selectedCars:[]//选中的购物车信息
            }
        },
        methods:{//vue的方法区,在方法区中定义方法，这些方法类似与java中的方法
            /**
             * 获得当前登录者信息
             */
            getCurUser(){
                //从sessionStorage中获得curUser的值，值为一个字符串
                let curUserStr = window.sessionStorage.getItem("curUser");
                if(curUserStr){
                    //将JSON格式的字符串解析为一个JSON对象
                    this.curUser = JSON.parse(curUserStr);
                    // console.log(this.curUser.user_name);
                }

            },
            /**
             * 退出登录
             */
            exit(){
                //使用ajax向服务端发送退出请求
                axios.delete('user/exit')
                    .then(response=>{
                        let result = response.data;
                        if(result.success){
                            //将浏览器的sessionStorage中存储的用户登录信息移除
                            window.sessionStorage.removeItem("curUser");//根据key移除对应的属性
                            //使用ElementUI的弹框组件实现
                            this.$message({
                                message: result.message,
                                type: 'success',
                                duration:500,//设置延迟关闭时间(毫秒)
                                onClose:()=>{//当弹框关闭后要执行的函数
                                    this.curUser = null;//重置curUser对象为null
                                }
                            });
                        }
                    })
                    .catch(err=>{
                        alert(err);
                    });
            },
            /**
             * 获得购物车的商品信息
             */
            getCarList(){
                axios.get('getCarList')
                    .then(response=>{
                        this.carList = response.data;
                    })
                    .catch(err=>{
                        alert(err);
                    });
            },
            /**
             * 更新购物车中商品的数量
             */
            updateCarCount(car_id,car_count){
                let car = {
                    "car_id":car_id,
                    "car_count":car_count
                };




                axios.put('updateCar',car)
                    .then(response=>{
                        let result = response.data;
                        if(result.success){
                            for (carInfo of this.carList){
                                if(carInfo.car_id==car_id){
                                    //标准是否被选中，默认为未被选中
                                    let isSelected = false;
                                    //检测改变的商品是否为选中的商品
                                    for (let carId of this.car_ids){
                                        if(carInfo.car_id==carId){//当前修改数量的商品是被选中
                                            //减去原有的总价格
                                            this.sum=this.sum-carInfo.total;
                                            isSelected = true;
                                            break;
                                        }
                                    }

                                    carInfo.total=car_count*carInfo.book_price;

                                    //如果当前商品是被选中的商品则更加总价
                                    if(isSelected){
                                        this.sum=this.sum+carInfo.total;
                                    }



                                    break;
                                }
                            }



                        }
                    })
                    .catch(err=>{
                        alert(err);
                    });
            },
            /**
             * 删除购物车中的商品
             */
            delCar(car_id){
                Swal.fire({
                    title: '删除提醒!\n确认删除购物车中的商品吗?',
                    showDenyButton: false,
                    showCancelButton: true,
                    confirmButtonText: '确认删除',
                    cancelButtonText: '取消'

                }).then((result) => {
                    /* Read more about isConfirmed, isDenied below */
                    if (result.isConfirmed) {//点击确认按钮后执行
                        axios.delete('deleteCar?car_id='+car_id)
                            .then(response=>{
                                let result = response.data;
                                if(result.success){
                                    this.getCarList();//刷新购物车中的数据
                                }
                            })
                            .catch(err=>{
                                alert(err);
                            });
                    }
                })
            },
            /**
             * 购物车列表复选框改变函数
             * 参数selection为当前选择的行数据数组
             * */
            selectionChangeHandler(selection){
                this.sum=0;//重置总价格
                this.car_ids=[];//重置选中的数组
                this.selectedCars=selection;
                //循环计算选中商品的总价格
                for(let selectedCar of selection){
                    //将选中的car_id存入到car_ids数组中
                    this.car_ids.push(selectedCar.car_id);
                    //计算选中商品的总价格
                    this.sum=this.sum+selectedCar.total;
                }
            },
            /**
             * 确认购买函数
             */
            confrimPay(){
                location.href="confrimPay.html?car_ids="+this.car_ids;

            }





        },
        created(){/*在页面加载后自动执行*/

        },
        mounted(){/*DOM结构在内存中构建前执行*/
            this.getCurUser();//获得当前登录者信息
            this.getCarList();


        }
    });
</script>
</body>
</html>